<!-- 首页面 -->
<template>
  <div class="container">
    <!-- 引入min-ui的swipe组件 -->
    <mt-swipe :show-indicators="false">
      <mt-swipe-item>
        <img src="../assets/img/t.jpg" alt />
      </mt-swipe-item>
      <mt-swipe-item>
        <img src="../assets/img/2.png" alt />
      </mt-swipe-item>
      <mt-swipe-item>
        <img src="../assets/img/3.png" alt />
      </mt-swipe-item>
    </mt-swipe>
    <!-- 中间按钮部分 -->
    <div class="buttons">
      <el-button type="info">拓客会员卡</el-button>
      <el-button type="info">股东人脉卡</el-button>
    </div>
    <!-- 下面组件 -->
    <div class="lists">
      <ul class="mui-table-view">
        <li class="mui-table-view-cell">
          <router-link to="/shareNumber" class="mui-navigate-right">可分享数量</router-link>
          <span class="mui-badge mui-badge-primary">0</span>
        </li>
        <li class="mui-table-view-cell">
          <router-link to="/activity" class="mui-navigate-right">赠送活动</router-link>
          <span class="mui-badge mui-badge-success">￥1082</span>
        </li>
        <li class="mui-table-view-cell">
          <a class="mui-navigate-right">品牌介绍</a>
        </li>
      </ul>
    </div>
    <!-- 按钮部分 -->
    <mt-button type="danger" size="large">立即领取</mt-button>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {}
};
</script>
<style scoped>
.container {
  position: relative;
  padding: 10px;
}
.mint-swipe {
  height: 200px;
  border-radius: 5px;
}
.mint-swipe img {
  width: 100%;
  height: 100%;
}
.mint-swipe-item {
  text-align: center;
}
.buttons {
  position: absolute;
  z-index: 33;
  top: 30%;
  display: flex;
  justify-content: space-between;
  width: 95%;
}
.el-button--info {
  font-size: 12px;
  border-radius: 30px;
}
.lists {
  margin-top: 10px;
  /* padding: 15px; */
  position: relative;
  margin-bottom: 50px;
}

.mui-table-view-cell {
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 14px;
}
.mui-badge-blue,
.mui-badge-primary,
.mui-badge-green,
.mui-badge-success {
  margin-right: 25px;
  font-size: 14px;
}
.mint-button--large {
  border-radius: 30px;
}
</style>
